<template>
  <div class="app-views">
    <div
      class="item-box"
      v-loading="loading"
      style="border-right: 1px dashed #e6e6e6"
    >
      <div class="sub-title">
        <i
          class="iconfont icon-list"
          style="margin-right: 5px; font-weight: bold"
        ></i>
        <div class="Title">设备列表</div>
      </div>
      <div class="device-list">
        <DCard
          :dName="item.name"
          :isCheck="isCheckCard == item.value"
          @click.native="handlerisCheck(item)"
          v-for="(item, index) in shardTypeList"
          :key="index"
          :status="deviceList[index]"
        />
      </div>
    </div>
    <div class="device-views">
      <div class="sub-title">
        <i class="iconfont icon-shebeituceng-" style="margin-right: 5px"></i>
        <div class="Title">设备图</div>
      </div>
      <div class="device-img">
        <div class="device-img-rec">
          <div class="show-box">
            <div class="img-box">
              <img
                :src="require(`@/assets/images/shard${isCheckCard + 1}.png`)"
                alt=""
              />
              <div
                class="btn"
                :style="{
                  top: '60%',
                  left: '40%',
                }"
                v-if="isCheckCard == 1"
              >
                <el-button type="warning" size="mini" @click="forceEnterLong"
                  >强制进片</el-button
                >
              </div>
            </div>

            <div class="deviceStatus">
              <div class="title">
                设备状态
                <i
                  class="el-icon-edit"
                  @click="openParamSet"
                  v-hasPermi="['assembly:device:edit']"
                ></i>
              </div>
              <div class="list" v-loading="showDeviceStatus.length == 0">
                <div
                  class="item"
                  v-for="item in showDeviceStatus"
                  :key="item.id"
                >
                  <div class="descript">
                    <span class="note"> {{ item.note }}</span>
                    <span class="value">
                      {{ item.message }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="deviceCard">
            <div
              class="item"
              v-for="(item, index) in device.deviceValue"
              :key="index"
              :style="{ backgroundColor: colorList[index] }"
              :class="subClickCard == index ? 'redBorder' : ''"
              @click="handlerswitch(index)"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <div class="signal">
          <div class="sub-title">
            <i
              class="iconfont icon-PLCxinhaoganzhizhongduan"
              style="margin-right: 5px"
            ></i>
            <div class="Title">信号列表</div>
          </div>
          <div class="signal-table">
            <el-table :data="tableData" style="width: 100%" height="100%">
                <el-table-column prop="id" label="ID" width="80" />
              <el-table-column
                prop="cmd"
                label="指令内容"
                width="200"
                show-overflow-tooltip
              />
              <el-table-column
                prop="cmdType"
                label="命今类型"
                show-overflow-tooltip
              />
              <el-table-column prop="createTime" label="时间" width="150">
                <template slot-scope="scope">
                  {{ scope.row.createTime.substr(10) }}
                </template>
              </el-table-column>
              <el-table-column label="完成状态" width="100">
                <template slot-scope="scope">
                  <el-tag :type="scope.row.state | tagType">{{
                    scope.row.state | status
                  }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    icon="el-icon-close"
                    type="text"
                    v-if="!scope.row.state"
                    v-hasPermi="['assembly:device:edit']"
                    @click="handlerCmd('fallbackAction', scope.row)"
                    >取消</el-button
                  >
                  <el-button
                    icon="el-icon-check"
                    type="text"
                    v-hasPermi="['assembly:device:edit']"
                    v-if="!scope.row.state"
                    @click="handlerCmd('executionCompleted', scope.row)"
                    >完成</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <div class="item-box">
      <LogView :jobGroup="7" :isShow="isShow" />
    </div>
    <el-drawer title="设备参数" :visible.sync="drawer" :direction="direction">
      <div class="params">
        <div class="param_item_W">
          <div class="paramsName">线号禁用</div>
          <div class="paramView" style="width: 150px">
            <el-select v-model="furId" placeholder="请选择" size="mini">
              <el-option
                v-for="(item, index) in temperList"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="footer">
          <el-button @click="drawer = false">取消</el-button>
          <el-button type="primary" @click="handlerEditDevice">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import DCard from "@/views/components/production/dCard.vue";
import LogView from "@/views/components/production/logViews.vue";
import { shardTypeList } from "../Config/label";
import { shardDB } from "@/config/db";
import { clearorderFurnaceInfo } from "@/api/assembly/cage";
import mixin from "../mixin/index";
import { forcedEntry } from "@/api/assembly/cage";
export default {
  components: {
    DCard,
    LogView,
  },
  props: {},
  mixins: [mixin],
  data() {
    return {
      direction: "rtl",
      drawer: false,
      shardTypeList,
      isCheckCard: 0,
      jobGroup: 0,
      loading: false,
      isShow: false,
      tableData: [],
      device: null,
      colorList: [
        "#23a8f2",
        "#0082fc",
        "#299b48",
        "#ce9178",
        "#da64a0",
        "#ffd662",
        "#8dc149",
      ],
      subClickCard: 0,
      temperList: [
        {
          label: "A27",
          value: 1,
        },
        {
          label: "索奥斯",
          value: 2,
        },
        {
          label: "格拉斯通",
          value: 3,
        },
      ],
      furId: 1,
    };
  },
  methods: {
    async openParamSet() {
      this.drawer = true;
    },
    handlerswitch(index) {
      this.subClickCard = index;
      this.getDeviceSignal();
    },
    //  index 选中的card
    handlerisCheck(item) {
      this.isCheckCard = item.value;
      this.device = item;
      this.getDeviceSignal();
    },
    handlerEditDevice() {
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^5563$/,
        inputErrorMessage: "密码错误",
        inputType: "password",
      })
        .then(({ value }) => {
          clearorderFurnaceInfo({ furId: this.furId }).then((res) => {
            if (res.code == 200) {
              this.$message.success("禁用线号成功");
              this.drawer = false;
            } else {
              this.$message.error("修改设备状态失败");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    forceEnterLong() {
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^5563$/,
        inputErrorMessage: "密码错误",
        inputType: "password",
      })
        .then(({ value }) => {
          forcedEntry({ lineId: 5 }).then((res) => {
            this.$message.success("指令执行成功");
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
  },
  created() {
    this.device = shardTypeList[this.isCheckCard];
    this.getSignal(shardDB);
  },
  destroyed() {},
  computed: {
    showDeviceStatus() {
      if (this.deviceList.length == 0) return [];
      let blockAddr = [0, 4, 8, 20, 116, 120, 124, 128, 208];
      let deviceBlock = shardDB[this.isCheckCard].block;
      return this.deviceList[this.isCheckCard].plcSignals.filter(
        (item) => item.block == deviceBlock && blockAddr.includes(item.addr)
      );
    },
  },
  filters: {
    devicePlcStatus(arg) {
      let arr = ["circle-stop", "circle-forbid", "circle-active"];
      if (arg.message == -1) return arr[0];
      if (arg.message == 0) return arr[2];
      if (arg.message == 1) return arr[1];
      if (arg.message == 2) return arr[2];
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../style/index.less");
.device-img-rec {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 55%;
  border-bottom: 1px dashed #e6e6e6;

  .show-box {
    width: 100%;
    height: 85% !important;
    display: flex;

    .img-box {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 95%;
        height: 350px;
      }
    }
     .btn {
    position: absolute;
  }
  }

  .deviceCard {
    width: 100%;
    border-top: 1px dashed #e6e6e6;
    height: 15%;
    padding: 5px;
    display: flex;
    justify-content: space-around;

    .item {
      width: calc(18% - 20px);
      font-size: 30px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 5px;
      margin-left: 5px;
      cursor: pointer;
    }

    .redBorder {
      border: 3px solid red;
    }
  }
}
</style>
